<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图灵机器人</title>
</head>
<style type="text/css">
    *{margin: 0;padding: 0;}
    body{background: #333333;font-size: 12px;font-family: 微软雅黑;color: #666;}
    .cz_TL{background: rgba(144,236,255,0.93);width: 800px;height: 530px;margin: 100px auto;}
    .cz_TL .cz-title{height: 60px;background: rgba(14,130,255,0.93);line-height: 68px;font-size: 22px;color: #ffffff;padding-left: 10px}
    .cz_TL .cz-con{height: 380px;background: #ffffff}
    .cz_TL .cz-msg{height: 90px;background: gainsboro}
    .cz_TL .cz-con .cz-left{padding: 10px 0 0 10px}
    .cz_TL .cz-con .cz-left img{vertical-align: middle}
    .cz_TL .cz-con .cz-right img{vertical-align: middle}
    .cz_TL .cz-con .cz-right{text-align: right;padding: 0 10px 0 0}
    .cz_TL .cz-msg .cz-box{width: 680px;height: 70px;background: floralwhite;padding: 10px;outline: none}
    .cz_TL .cz-msg .cz-box{float: left}
    .cz_TL .cz-msg .cz-send{float: right;width: 100px;height: 90px}
    .cz_TL .cz-msg .cz-send input{width: 100px;height: 90px;border: 0;outline: none;}
    .cz_TL .cz-msg .cz-send input:hover{background: gray}
</style>
<body>
    <div class="cz_TL">
        <div class="cz-title">人工智能机器人V1.0</div>
        <div class="cz-con">
            <#--<div class="cz-left">-->
                <#--<img src="../static/images/user.jpg" width="50px" height="50px">你好-->
            <#--</div>-->
            <!--<div class="cz-right">-->
                <!--你好<img th:src="@{images/timg.jpg}" width="50px" height="50px">-->
            <!--</div>-->
        </div>
        <div class="cz-msg">
            <div class="cz-box" contenteditable="true"></div>
            <div class="cz-send">
                <input type="button" value="发送消息" id="cz-button">
            </div>
        </div>
    </div>
    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <#--<script type="text/html" id="send">-->
        <#--<div class="cz-right">-->
            <#--<img th:src="@{images/timg.jpg}" width="50px" height="50px" id="img">-->
        <#--</div>-->
    <#--</script>-->
    <script>
        $(function () {
            $("#cz-button").click(function () {

                var value = $(".cz-box").text();
                $(".cz-con").append("<div class='cz-right'>"+value+
                    "<img src='../static/images/timg.jpg' width='50px' height='50px'>"+
                    "</div>");
                $(".cz-box").html("");
                $.ajax({
                    url: "/send",
                    type: "post",
                    data: {
                        value: value
                    },
                    success: function (data) {
                        var result = JSON.parse(data);
                        $(".cz-con").append("<div class='cz-left'>"+
                                "<img src='../static/images/user.jpg' width='50px' height='50px'>"+result.text+
                                "</div>");
                    }
                })
            })
        })
    </script>
</body>
</html>